import React, { Component } from 'react'
import styles from "./brandBook.module.scss"
import axios from '../../../../http/request'
import '../../../../assest/iconfont/icon.css'
import {getBrandBookList,getDefaultList} from "../../../../http/index";
export default class BrandBook extends Component {
 
  state={
    // 导航栏静态结构自己手写数据用于列表渲染
    page:1,
    pagesize:12,
    title:"",
    totalList:[], //初始化列表数据
    // 头部数据
    titledata:[],
    codeType:true,
    content:"数据加载中",
    tabIndex:null,
  }
  // 防抖函数封装
  debounce = (func, delay,timerName,_this) => {
    return  () => {
        _this.setState((provious)=>{
          let timer = provious[timerName]
          timer && clearTimeout(timer); //清除定时器 ， 重新绑定一个定时器  ， delay内没有再次触发时func才会执行
            return {
              timer : setTimeout(func,delay)
            }
        })
    };
  }
  // 点击导航列表栏，重新获取数据
    // 列表滚动事件处理函数
    bindScroll=()=>{
      let scrollHeight=this.refs.bookContentRef.scrollHeight
      // console.log("窗口可以滚动的最大高度(固定值)scrollHeight",scrollHeight)
      let clientHeight=this.refs.bookContentRef.clientHeight
      // console.log("可视区域高度(一个固定值)clientHeight",clientHeight)
      let scrollTop=this.refs.bookContentRef.scrollTop
      // console.log("滚动距离scrollTop",scrollTop)
      let func=()=>{
        if(scrollHeight-scrollTop-clientHeight<50){
          if(this.state.page>2){
            this.setState({
              content:"没有更多内容了！"
            })
            return false
           }else{
            axios.get(`brand-books-flyer/index?page=${++this.state.page}&pagesize=12&title=`).then(res=>{
              this.setState({
                totalList:[...this.state.totalList,...res.data]
              })
            })
          }  
        
      }
      }

      this.debounce(func, 100,'timer',this)()
    }
    // 点击列表栏中内容进行路由跳转
    handleItemClick=(id) => {
      axios.get(`/brand-books-flyer/view/${id}`).then((res)=>{
        let DetailId=res.data.h5_page_address.split('=')[1]
        window.location.href=`https://www.wlnkaoshi.com/web/activity/detail/page.html?id=${DetailId}`
      })
    }
  componentDidMount(){
    // 获取头部数据信息
    axios.get("home/relations/category?ignore_cache=1").then(res=>{
      this.setState({
        titledata:res.data,
        // category_id:
      })
    })
    // 获取列表初始化时的列表数据
    getDefaultList().then(res=>{
      this.setState({
        totalList:res
      })
    })
    // console.log(this.refs.bookContentRef)
    // 监听列表页滚动事件
    this.refs.bookContentRef.addEventListener("scroll",this.bindScroll)

  }
  componentWillUnmount() {
    // 移除滚动监听
    this.refs.bookContentRef.removeEventListener('scroll', this.bindScroll);
}
  render() {
    return (
      <div className={styles.main}>
        {/* 头部导航栏 */}
      <div>
        <div className={styles.header}>
          <div className={styles.left} onClick={() => {this.onLeftClick()}}>
            <i className='iconfont iconzuojiantou'></i>
          </div>
          <div className={styles.middle}>
            品牌图书
          </div>
        </div>
      </div>
      {/* 导航列表 */}
        <div className={styles.brandList}>
          {
            this.state.titledata.map((item,index)=>{
              return  <div className={styles.brandItem} key={item.typeId}
                           onClick={()=>{this.tabClick(item.typeId,index)}}
                           style={this.state.tabIndex===index?{opacity:1}:{opacity:0.3}}>
                        <img src={item.img} alt=""/>
                      </div>
            })
          }
        </div>
        {/* 图书列表栏 */}
          <div className={styles.bookContent} ref="bookContentRef">
            <div className={styles.compScrollLoadMore}>
                <div className={styles.bookList}>
               {
                 this.state.totalList.map(item=>{
                   return <div className={styles.bookItem} key={item.id} title={item.title} onClick={this.handleItemClick.bind(this,item.id,item.title)}>
                            <div className={styles.pic}>
                                <img src={item.thumb} alt=""/>
                            </div>
                            <div className={styles.tit}>{item.title}</div>
                            <div className={styles.tips}>{item.describe}</div>
                          </div>
                 })
               }
                </div>
                <div className={styles.loadMore}>
                       {this.state.content}
                </div>
            </div>
          </div>
      </div>
    )
  }
  onLeftClick(){
    window.history.back()
  }
  tabClick(id,index){
    getBrandBookList(id).then(res=>{
      this.setState({
        totalList:res,
        timer : null,
        tabIndex:index
      })
    }).catch(err=>{
      console.log(err)
    })
  }
}
